  <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        Fiche Biens
                        <small>Control panel</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="<?=site_url()?>"><i class="fa fa-dashboard"></i> Accueil</a></li>
                        <li >Dossiers</li>
                        <li class="active">Fiche Biens</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">
                     <div class="row">
                         <div class="col-xs-12">
                                <a class="btn btn-app" href="<?=site_url()?>properties/addNewProperty"><i class="fa fa-plus-circle"> </i>Nouveau Bien</a>
                                </div>
                        <div class="col-xs-12">
				             <div class="box">
                                <div class="box-header">
                              
                                </div><!-- /.box-header -->
                                <div class="box-body table-responsive">
                                    <table id="propertiesTbl" class="table table-bordered  table-hover">
                                        <thead>
                                            <tr>
                                              
                                               	<th></th>
                                               	<th>ID</th>
                                                <th>Adresse & N&deg;</th>                                                                                                                                             
                                                <th>Code Postal</th>
                                                <th>Ville</th>
                                                <th>Bte</th>
                                                <th>Etage</th>
                                                <th>TYPE DE BIEN</th>    
                                                <th>Type de Contrat</th> 
                                                <th>Transaction</th>                                           
                                                <th>Propriétaire</th>
                                                <th>Représentant</th>
                                                <th>Actions</th>
                                              <!--   
                                                <th>Flash</th> -->
                                            </tr>
                                        </thead>
                                   
                                       
                                    </table>
                                    <div class="clearfix"></div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                            </div>
                            </div>
                            
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        
          <!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" >
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
        
<!-- Modal -->
<div class="modal fade" id="deleteProperty" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Supprimer bien</h4>
      </div>
      <div class="modal-body">
		
      </div>
      <div class="modal-footer">       
      </div>
    </div>
  </div>
</div>  
<script>

function deleteProperty($id){
    var $data = "'"+$id+"'";
  
  	$('#deleteProperty').modal({
  		  keyboard: false
  		});
      		$("#deleteProperty .modal-body").html('<p>Vous voulez supprimer ce bien ?</p>');
      		$("#deleteProperty .modal-footer").html(' <button type="button" class="btn btn-default" data-dismiss="modal">Non</button> <button id="deletePropertyBtn" type="button" class="btn btn-danger" data-loading-text="traitement..." onclick = "do_delete('+$data+')" >OUI</button>');
  }

function do_delete($id)
{
	
	var btn = $("#deletePropertyBtn");
    btn.button('loading');
	$.ajax({
		  async: false, 	
		  type: 'POST',
		  url: '<?=site_url()?>properties/deleteProperty',
		  data: {id: $id},
		  success: function(data){
				
				btn.button('reset');
				$('#tbl_'+$id).remove();
				$("#deleteProperty .modal-body p").html('<span class="text-red">Ce compte a été effacé.</span>');
				$("#deleteProperty .modal-footer").html(' <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button> ');
			  },
		  dataType: 'json'
		});
}

function format ( d ) {
		
		return '<div class="row"><div class="col-lg-4">'+ 
		'Superficie: '+d.surface+'<br>'+
 	   'Prix: '+d.price+'<br>'+
 	   'Description: '+d.flash+'<hr>'+
 	  ' Historique du bien:<div class="box-body" id="trans_'+d.id+'"><ul class="transaction"></ul></div><hr>'+
 	   ' To Do List:<div class="box-body" id="list_'+d.id+'"><ul class="todo-list"></ul></div></div>'+
 	 
 	  '<div class="col-lg-8 ">'+ 
 	   '<div class="photos_'+d.id+' "></div></div>';
 	  
	
}

function pad (str, max) {
	  str = str.toString();
	  return str.length < max ? pad("0" + str, max) : str;
	}

$(function() {
	
    var dt = $('#propertiesTbl').dataTable({
			"language" : {
				"url" : "<?=base_url()?>resources/ajax/data/lang_fr.json"
			},
			 "processing": true,
			
		     'ajax' : "<?=site_url()?>properties/propertiesData",
		     "columns": [
		                 {
		                     "class":          "details-control",
		                     "orderable":      false,
		                     "data":           null,
		                     "defaultContent": ""
		                 },
		                 { "data": 'id' },	
		                 { "data": "address" },		                 	                
		                 { "data": "po" },
		                 { "data": "city" },
		                 { "data": "pobox" },
		                 { "data": "floor" },
		                 { "data": "category" },
		                 { "data": "contract" },
		                 { "data": "transaction" },
		                 { "data": "customer" },
		                 { "data": "agent" },
		                 { "data": "actions" }
		             ],
		             "fnCreatedRow": function( nRow, aData, iDataIndex ) {
		                 $(nRow).attr('id', 'tbl_'+aData.id);
		             },
		             "fnDrawCallback": function (oSettings) {
		             	 
		           	    $(' a.allowEdit').editable({
		           	    	mode:'inline',
							emptytext:'- vide -'
			           	    });
		           	  
		            },
			 "sDom": 'T<"clear">lfrtip',
			 "oTableTools": {
				 "sSwfPath": "<?=base_url()?>resources/bootstrap/js/plugins/datatables/TableTools/swf/copy_csv_xls_pdf.swf",
	            "aButtons": [
	              
	                "xls",
	                {
	                    "sExtends": "pdf",
	                    "sPdfOrientation": "landscape"
	                },
	                {
	                    "sExtends":    "collection",
	                    "sButtonText": "Save",
	                    "aButtons":    [ "csv", "xls", "pdf" ]
	                }
	            ]
	        }
			

		}).api();
  
    // Array to track the ids of the details displayed rows
    var detailRows = [];
    
    $('#propertiesTbl tbody').on( 'click', 'tr td:first-child', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
    
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
			
			$id = row.data().id;			
			$.ajax({
				  type: 'POST',
				  url: "<?=site_url()?>properties/get_extraData",
				  data: {id: $id},
				  success: function(p){
					  tr.addClass( 'details' );
		          
			          row.child( format(row.data() ) ).show();
			 
			            // Add to the 'open' array
			           if ( idx === -1 ) {
			                detailRows.push( tr.attr('id') );
			            }
			           
			        
					   
					   if( p.photos != null){	
						  $photos = JSON.stringify(p.photos);		   
			  		 $.each($.parseJSON($photos), function(idx, obj) {
			  			 $(".photos_"+$id).append('<div class="col-lg-2 col-xs-3 col-md-4"> <a href="'+obj.file_l+'" class="thumbnail" data-gallery="" ><img src="'+obj.file_s+'" height="100"></a></div>');
			  			})
			            }
					   if( p.toDoList != null){
						   $toDoList = JSON.stringify(p.toDoList);
						   $.each($.parseJSON($toDoList), function(idx, obj) {							 
					  			 $('#list_'+$id+' .todo-list').append('<li> <span class="handle"><i class="fa fa-ellipsis-v"></i></span><span class="label bg-'+obj.color+'"><i class="fa fa-clock-o"></i> '+obj.date_start+'</span> <span class="text">'+obj.content+'</span></li>');
					  			})
						}	
					   if( p.transactions != null){
						   $transactions = JSON.stringify(p.transactions);
						   $.each($.parseJSON($transactions), function(idx, obj) {							 
					  			 $('#trans_'+$id+' .transaction').append('<li>  <span class="label label-default"> '+obj.date+'</span> <span class="text"><b>'+obj.procedure+'</b></span> - <span><small>Détailles: { '+obj.flash+' }</small></span></li>');
					  			})
						}
						
			            $(' a.allowEdit').editable({
			       	    	mode:'inline',
			    			emptytext:'- vide -'
			           	    });
					  },
				  dataType: 'json'
         
     	 });
        }


       
    } );
 
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td:first-child').trigger( 'click' );
        } );
    } );
});



</script>